<template>
  <div class="bq-div">
    <div class="header">
      <span class="title">{{ dataObject.tagName }}</span>
      <span class="close" @click="emit('close')"></span>
    </div>
    <img
      class="loveImg"
      v-if="!props.info.clused"
      @click="changeClused('1')"
      src="/images/new/tag/love.png"
    />
    <img
      class="loveImg"
      @click="changeClused('0')"
      v-else
      src="/images/new/tag/loved.png"
    />
    <div class="tab-content">
      <span
        class="tab-btn"
        @click="changTab('1')"
        :class="{ active: currentTab == '1' }"
        >人员</span
      >
      <span
        class="tab-btn"
        @click="changTab('2')"
        :class="{ active: currentTab == '2' }"
        >车辆</span
      >
    </div>
    <div class="content-info">
      <!-- 视频 -->
      <el-tabs v-model="videoTab" v-if="currentTab == 1">
        <el-tab-pane
          label="进口视频"
          name="jk"
          v-if="points.pin && points.pin.device"
        >
          <div class="video-box" v-if="videoTab == 'jk'">
            <onem ref="videoref" :vid="currentPoint" />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="出口视频"
          name="ck"
          v-if="points.pout && points.pout.device"
        >
          <div class="video-box" v-if="videoTab == 'ck'">
            <onem ref="videoref" :vid="currentPoint" />
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="videoTab" v-if="currentTab == 2">
        <el-tab-pane
          label="进口视频"
          name="jk"
          v-if="points.cin && points.cin.device"
        >
          <div class="video-box" v-if="videoTab == 'jk'">
            <onem ref="videoref" :vid="currentPoint" />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="出口视频"
          name="ck"
          v-if="points.cout && points.cout.device"
        >
          <div class="video-box" v-if="videoTab == 'ck'">
            <onem ref="videoref" :vid="currentPoint" />
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="contentTab">
        <el-tab-pane label="抓拍记录" name="ryzpjl">
          <div
            class="table-box"
            v-if="contentTab == 'ryzpjl' && currentTab == '1'"
          >
            <div class="header-t">
              <span class="ht">抓拍照片</span>
              <span class="ht">性别</span>
              <!-- <span class="ht">状态</span> -->
              <span class="ht">抓拍时间</span>
            </div>
            <div class="table-cell-box">
              <div class="cell-p" c v-for="item in eventList" :key="item">
                <span class="cell">
                  <img class="img" :src="item.capturePic" />
                </span>
                <span class="cell"> {{ item.gender }} </span>
                <!-- <span class="cell"> -- </span> -->
                <span class="cell"> {{ item.captureTime }} </span>
              </div>
            </div>
          </div>
          <div
            class="table-box"
            v-if="contentTab == 'ryzpjl' && currentTab == '2'"
          >
            <div class="header-t">
              <span class="ht">抓拍照片</span>
              <span class="ht" style="width: 100px">车牌号</span>
              <!-- <span class="ht">状态</span> -->
              <span class="ht">抓拍时间</span>
            </div>
            <div class="table-cell-box">
              <div class="cell-p" c v-for="item in eventList" :key="item">
                <span class="cell">
                  <img class="img" :src="item.capturePic" />
                </span>
                <span class="cell" style="width: 100px">
                  {{ item.plateNo }}
                </span>
                <!-- <span class="cell"> -- </span> -->
                <span class="cell"> {{ item.captureTime }} </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          :label="currentTab == '1' ? '人流情况' : '车流情况'"
          name="ryrlqk"
        >
          <div class="table-box echarts-box" v-if="contentTab == 'ryrlqk'">
            <lineEcharts
              :options="optionsData"
              :titleName="currentTab == '1' ? '人/个' : '车/辆'"
            ></lineEcharts>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import lineEcharts from "./line.vue";
const emit = defineEmits(["close", "changeClose"]);
const props = defineProps({
  info: Object,
  isd: {
    default: false,
    type: Boolean,
  },
});

const changeClused = (clused) => {
  emit("changeClose", clused);
};

let videoTab = ref("jk");
let videoref = ref();

let contentTab = ref("ryzpjl");

let optionsData = ref();
let currentTab = ref("1");
// 切换人车
const changTab = (tab) => {
  currentTab.value = tab;
  if (currentTab.value === "1") {
    if (
      points.value.pin &&
      points.value.pin.device &&
      points.value.pin.device.deviceId
    ) {
      videoTab.value = "jk";
    } else {
      videoTab.value = "ck";
    }
    if (videoTab.value === "jk") {
      currentPoint.value = points.value.pin.device.deviceId;
    } else {
      currentPoint.value = points.value.pout.device.deviceId;
    }
  } else {
    if (
      points.value.cin &&
      points.value.cin.device &&
      points.value.cin.device.deviceId
    ) {
      videoTab.value = "jk";
    } else {
      videoTab.value = "ck";
    }
    if (videoTab.value === "jk") {
      currentPoint.value = points.value.cin.device.deviceId;
    } else {
      currentPoint.value = points.value.cout.device.deviceId;
    }
  }
};

watch(contentTab, () => {
  if (contentTab.value == "ryrlqk") {
    optionsData.value = {
      xAxis: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      in: [120, 132, 101, 134, 90, 230, 210],
      out: [132, 332, 301, 334, 190, 330, 310],
    };
  }
});

let dataObject = ref({});
let points = ref({
  pin: "",
  pout: "",
  cin: "",
  cout: "",
});
let currentPoint = ref("");
const getData = () => {
  // let res = {
  //   errorCode: "0",
  //   data: {
  //     tagInfo: {
  //       tagId: "1895098803661443072",
  //       tagName: "临开里北门",
  //       deviceId: "1889981491715379232",
  //       categoryId: "1846861780832358400",
  //       categoryName: "社区服务",
  //       icon: "https://vp.bcdtech.cn:8787/new-port-file/sqff.png",
  //       lightenIcon: "https://vp.bcdtech.cn:8787/new-port-file/sqff.png",
  //       ptzZoompos: "1",
  //       ptzPanpos: "1",
  //       ptzTiltpos: "1",
  //       graphType: "point",
  //       graphData:
  //         '{"type":1,"data":[{"x":0.8373333333333334,"y":0.44274809160305345}]}',
  //       templateId: "WZ",
  //       templateTextdesc: null,
  //       templatePic: null,
  //       tempDeviceId: null,
  //       deviceName: null,
  //       originDeviceCode: null,
  //       templateCapture:
  //         '[{\n"label":"face",\n"types":[{\n"type":"in",\n"device":{"deviceName":"临开里北门人脸抓拍进口","deviceId":"1889981491438555140"}\n},\n{\n"type":"out",\n"device":{"deviceName":"临开里2#北门人脸抓拍出口","deviceId":"1889981491438555136"}\n}]\n},\n{\n"label":"vehicle",\n"types":[{\n"type":"in",\n"device":{"deviceName":"临开里北门车辆抓拍进口","deviceId":"1889981491438555141"}\n},\n{\n"type":"out",\n"device":{"deviceName":"临开里2#北门车辆抓拍出口","deviceId":"1889981491438555137"}\n}]\n}\n]',
  //     },
  //     faceStats: null,
  //     vehicleStats: null,
  //     tempCapture: null,
  //   },
  //   message: "操作成功",
  // };
  // dataObject.value = res.data.tagInfo;
  // points.value.pin = JSON.parse(dataObject.value.templateCapture)[0].types[0];
  // points.value.pout = JSON.parse(dataObject.value.templateCapture)[0].types[1];
  // points.value.cin = JSON.parse(dataObject.value.templateCapture)[1].types[0];
  // points.value.cout = JSON.parse(dataObject.value.templateCapture)[1].types[1];
  // console.log(points.value);
  // currentPoint.value = points.value.pin.device.deviceId;
  useApi
    .post("/dynamicview/ar/tagDetail", { tagId: props.info.tagId })
    .then((res) => {
      dataObject.value = res.data.tagInfo;
      points.value.pin = JSON.parse(dataObject.value.templateCapture)[0]
        .types[0]
        ? JSON.parse(dataObject.value.templateCapture)[0].types[0]
        : {};
      points.value.pout = JSON.parse(dataObject.value.templateCapture)[0]
        .types[1]
        ? JSON.parse(dataObject.value.templateCapture)[0].types[1]
        : {};
      points.value.cin = JSON.parse(dataObject.value.templateCapture)[1]
        .types[0]
        ? JSON.parse(dataObject.value.templateCapture)[1].types[0]
        : {};
      points.value.cout = JSON.parse(dataObject.value.templateCapture)[1]
        .types[1]
        ? JSON.parse(dataObject.value.templateCapture)[1].types[1]
        : {};
      currentPoint.value = points.value.pin.device.deviceId;
    });
};

// 获取事件
let eventList = ref([
  // {
  //   plateNo: "津MTX823",
  // },
]);
let typeSnap = ref("face");
const getEvent = () => {
  useApi
    .post("/dynamicview/ar/getcapturelistbydeviceid", {
      deviceId: currentPoint.value,
    })
    .then((res) => {
      // {
      //   "capturePic": "https://vp.bcdtech.cn:8787/picture?url=http://20.13.9.232:80/picture/Streaming/tracks/303/?name=ch00003_01010003140053933721600013103&size=13103",
      //   "gender": "女",
      //   "captureTime": "2025-03-05 15:25:04"
      // },
      //  {
      //   "capturePic": "https://vp.bcdtech.cn:8787/picture?url=http://20.13.7.221:80/picture/Streaming/tracks/3803/?name=ch00038_00010004650100477081600640316&size=640316",
      //   "plateNo": "津MTX823",
      //   "color": "red",
      //   "type": "vehicle",
      //   "captureTime": "2025-03-05 15:36:19"
      // },
      if (res.data.faceCaptureList && res.data.faceCaptureList.length > 0) {
        eventList.value = res.data.faceCaptureList;
        typeSnap.value = "face";
      } else if (
        res.data.vehicleCaptureList &&
        res.data.vehicleCaptureList.length > 0
      ) {
        eventList.value = res.data.vehicleCaptureList;
        typeSnap.value = "vehicle";
      }
    });
};

watch(currentPoint, () => {
  getEvent();
});

watch(videoTab, () => {
  // 人获取监控点
  if (currentTab.value === "1") {
    if (videoTab.value === "jk") {
      currentPoint.value = points.value.pin.device.deviceId;
    } else {
      currentPoint.value = points.value.pout.device.deviceId;
    }
  } else {
    if (videoTab.value === "jk") {
      currentPoint.value = points.value.cin.device.deviceId;
    } else {
      currentPoint.value = points.value.cout.device.deviceId;
    }
  }
  if (videoref.value) {
    videoref.value.resize();
  }
});

watch(
  () => props.info,
  (newval) => {
    if (newval.tagId) {
      getData();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss">
.bq-div {
  width: 503px;
  height: 720px;
  background: url("/images/new/tag/tagbg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .loveImg {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 40px;
    top: 75px;
    cursor: pointer;
    z-index: 999;
  }
  .header {
    width: 100%;
    height: 52.5px;
    position: relative;
    background: url("/images/new/tag/header.png") no-repeat;
    background-size: 100% 100%;
    .title {
      display: inline-block;
      height: 100%;
      padding-left: 25px;
      font-family: YouSheBiaoTiHei;
      font-size: 25px;
      color: #ffffff;
      line-height: 60px;
    }

    .close {
      width: 40px;
      height: 40px;
      position: absolute;
      right: 16px;
      top: 20.5px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 30px;
      cursor: pointer;
    }
  }
  .tab-content {
    margin: 23px auto 10px;
    width: 208px;
    height: 40px;
    background: url("/images/new/tag/tabbg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding: 2px 4px;
    position: relative;
    .tab-btn {
      width: 100px;
      height: 100%;
      text-align: center;
      line-height: 36px;
      font-family: YouSheBiaoTiHei;
      font-size: 21px;
      color: #ffffff;
      cursor: pointer;
      &.active {
        background: url("/images/new/tag/tab.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .content-info {
    padding: 0 30px;
    .video-box {
      width: 440px;
      height: 247.5px;
    }
    .el-tabs__item {
      font-family: YouSheBiaoTiHei;
      font-size: 21px;
      color: #ffffff;
      line-height: 29px;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      &.is-active {
      }
    }
    .el-tabs__nav-wrap:after {
      background: none;
    }
    .el-tabs__active-bar {
      background: #18e1ff;
    }

    .table-box {
      width: 100%;
      background: url("/images/new/tag/tablebg.png") no-repeat;
      background-size: 100% 100%;
      .header-t {
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        background: url("/images/new/tag/headerbg.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
        .ht {
          height: 100%;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 18px;
          color: #ffffff;
          line-height: 40px;
          margin: 16px 2px;
          &:nth-child(1) {
            padding-left: 20px;
          }
          &:nth-child(1) {
            width: 100px;
          }
          &:nth-child(2) {
            width: 50px;
          }
          // &:nth-child(3) {
          //   width: 60px;
          // }
          &:nth-child(4) {
            display: flex1;
          }
        }
      }
      .table-cell-box {
        width: 100%;
        height: 175px;
        overflow: auto;
        .cell-p {
          height: 50px;
          display: flex;
          align-items: center;
          overflow: hidden;
          margin: 8px 0;
          .cell {
            height: 100%;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #ffffff;
            line-height: 50px;
            margin: 16px 2px;
            // padding-left:12px;
            &:nth-child(1) {
              width: 100px;
              text-align: center;
              .img {
                width: 85px;
                height: 47.5px;
              }
            }
            &:nth-child(2) {
              width: 50px;
            }
            // &:nth-child(3) {
            //   width: 60px;
            // }
            &:nth-child(4) {
              flex: 1;
            }
          }
        }
      }
    }
    .echarts-box {
      height: 215px;
    }
  }
}
</style>